﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chromely</title>
    <link rel="stylesheet" href="../Content/css/bootstrap.min.css">
    <script src="../Content/js/jquery.min.js"></script>
    <script src="../Content/js/tether.min.js"></script>
    <script src="../Content/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function messageRouterGetResult(res) {
            $('#messageRouterGetResult tbody').empty();
            var jsonData = JSON.parse(res);
            if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
                for (var i = 0; i < jsonData.Data.length; i++) {
                    var row = '<tr>';

                    row += '<td>' + jsonData.Data[i].Id + '</td>';
                    row += '<td>' + jsonData.Data[i].Title + '</td>';
                    row += '<td>' + jsonData.Data[i].Year + '</td>';
                    row += '<td>' + jsonData.Data[i].Votes + '</td>';
                    row += '<td>' + jsonData.Data[i].Rating + '</td>';
                    row += '<td>' + jsonData.Data[i].Date + '</td>';
                    row += '<td>' + jsonData.Data[i].RestfulAssembly + '</td>';

                    row += '</tr>';
                    $('#messageRouterGetResult tbody').append(row);
                }
            }
        }

        function messageRouterGetRun() {

            $('#messageRouterGetResult tbody').html('');

            var request = {
                "method": "GET",
                "url": "/democontroller/movies/get",
                "parameters": null,
                "postData": null,
            };

            window.cefQuery({
                request: JSON.stringify(request),
                onSuccess: function (response) {
                    messageRouterGetResult(response);
                }, onFailure: function (err, msg) {
                    console.log(err, msg);
                }
            });
        }

        function messageRouterPostResult(res) {
            var jsonData = JSON.parse(res);
            if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
                $('#messageRouterPostResult').html(jsonData.Data);
            }
        }

        function messageRouterPostRun() {

            $('#messageRouterPostResult').html('');

            var moviesJson = [
                { Id: 1, Title: "The Shawshank Redemption", Year: 1994, Votes: 678790, Rating: 9.2 },
                { Id: 2, Title: "The Godfather", Year: 1972, votes: 511495, Rating: 9.2 },
                { Id: 3, Title: "The Godfather: Part II", Year: 1974, Votes: 319352, Rating: 9.0 },
                { Id: 4, Title: "The Good, the Bad and the Ugly", Year: 1966, Votes: 213030, Rating: 8.9 },
                { Id: 5, Title: "My Fair Lady", Year: 1964, Votes: 533848, Rating: 8.9 },
                { Id: 6, Title: "12 Angry Men", Year: 1957, Votes: 164558, Rating: 8.9 }
            ];

            var request = {
                "method": "POST",
                "url": "/democontroller/movies/post",
                "parameters": null,
                "postData": moviesJson,
            };

            window.cefQuery({
                request: JSON.stringify(request),
                onSuccess: function (response) {
                    messageRouterPostResult(response);
                }, onFailure: function (err, msg) {
                    console.log(err, msg);
                }
            });
        }

    </script>
</head>
<body>
    <div class="container justify-content-center">
            <!-- -->
            <div class="form-group row justify-content-center col-12">
                <div class="row col-12">
                    <h1>Message Router Demo</h1>
                </div>
    
                    <!-- Nav pills -->
                <div class="row col-12">
                        <ul class="nav nav-pills" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="pill" href="#sectionA">Get</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="pill" href="#sectionB">Post</a>
                                </li>
                        </ul>
                </div>


                <div class="row col-12">
                    <div class="row" style="height:25px;"></div>
                        
                <!-- Tab panes -->
                <div class="tab-content">
                        <div id="sectionA" class="container tab-pane active">
                            <br>
                            <div class="row">
                                <div class="col-12">
                                    Route Path:&ensp;/democontroller/movies/get &ensp; <button id="buttonmessageRouterGetRun" type="button" class="btn btn-primary btn-sm" onclick="messageRouterGetRun()">Run</button>
                                </div>
                                <div style="height:100px;"></div>
                                <div class="col-12">
                                    <div class='table-responsive'>
                                        <table id="messageRouterGetResult" class='table'>
                                            <thead>
                                                <tr>
                                                    <th>Id</th>
                                                    <th>Title</th>
                                                    <th>Year</th>
                                                    <th>Votes</th>
                                                    <th>Rating</th>
                                                    <th>Date</th>
                                                    <th>RestfulAssembly</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="sectionB" class="container tab-pane fade">
                            <br>
                            <div class="row">
                                <div class="col-12">
                                    Route Path:&ensp;/democontroller/movies/post&ensp;<button id="buttonmessageRouterPostRun" type="button" class="btn btn-primary btn-sm" onclick="messageRouterPostRun()">Run</button>
                                </div>
                                <div style="height:100px;"></div>
                                <div class="col-12">
                                    <div id="messageRouterPostResult"></div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
                
    </div>
</body>
</html>










	
